<template>
  <el-container>
    <!--头部-->
    <el-header class="refundHeader">
      <!--表格上部标签-->
      <div class="tableHeader">
        <span>售后退款</span>
      </div>
      <!--表格搜索框-->
      <div class="tableSearch">
        <el-input placeholder="请输入内容" v-model="search.value" class="input-with-select" span="12" clearable @clear="refreshData">
          <el-select v-model="search.method" slot="prepend" placeholder="请选择" :value="search.method">
            <el-option label="订单编号" value="订单编号"></el-option>
            <el-option label="处理方式" value="处理方式"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="dataFilter"></el-button>
        </el-input>
      </div>
    </el-header>
    <!--主体-->
    <el-main>
      <el-table
        ref="multipleTable"
        :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column align="center"
                         label="退款编号">
          <template slot-scope="scope">
            {{ scope.row.refund_id }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="订单编号">
          <template slot-scope="scope">
            {{ scope.row.order_id }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="退款原因">
          <template slot-scope="scope">
            {{ scope.row.request_reason }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="处理时间">
          <template slot-scope="scope">
            {{ scope.row.request_time}}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="处理方式">
          <template slot-scope="scope">
            {{ scope.row.handle_method }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="备注">
          <template slot-scope="scope">
            {{ scope.row.handle_note }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="状态"
                         :filters="[{text:'已处理', value:'已处理'},{text:'未处理', value:'未处理'}]"
                         :filter-method="filterTag"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="toggleButtonChange(scope.row.refund_state).StateColor">
              {{ scope.row.refund_state }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleCheck(scope.$index, scope.row)">查看
            </el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              v-if="$store.state.userInfo.employeeLv!=='门店管理员'">处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tableBottom">
        <el-button type="success" size="mini" @click="handleRefund" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">批量退款</el-button><!--修改按钮-->
        <!--<el-button size="mini" type="info" disabled>导出 Excel</el-button>-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
          class="myRight">
        </el-pagination>
      </div>
    </el-main>


    <!--查看弹框-->
    <el-dialog title="退款详情表" :visible.sync="dialogTableVisible" width="50%">
      <el-table :data="gridData">
        <el-table-column property="name" label="基本信息" width="150" align="center"></el-table-column>
        <el-table-column property="date" label="" width="700" align="center"></el-table-column>
      </el-table>
    </el-dialog>

    <!--编辑弹框-->
    <el-dialog title="退款处理" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="100px">

        <el-form-item label="退款编号:">
          <el-input v-model="form.name" disabled="disabled"></el-input>
        </el-form-item>

        <el-form-item label="处理方式:">
          <el-select v-model="form.region" placeholder="请选择处理方式">
            <el-option label="退货入库" value="退货入库"></el-option>
            <el-option label="重新发货" value="重新发货"></el-option>
            <el-option label="退款" value="退款"></el-option>
          </el-select>
        </el-form-item>

        <!--处理方式不同条件下的选项-->
        <div v-show="form.region === '退款'">
          <el-form-item label="退款金额:">
            <el-input type="text" v-model="form.money"></el-input>
          </el-form-item>
          <el-form-item label="处理意见:">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item label="退款时间:">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </div>

        <div v-show="form.region === '退货入库'">
          <el-form-item label="处理意见:">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
        </div>

        <div v-show="form.region === '重新发货'">
          <el-form-item label="发货物流单号:">
            <el-input type="text" v-model="form.logistic"></el-input>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit">立即处理</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!--批量退款-->
    <el-dialog title="退款处理" :visible.sync="dialogSelectRefundFormVisible">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="处理方式:">
          <el-select v-model="form.region" placeholder="请选择处理方式">
            <el-option label="退款" value="退款"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退款金额:">
          <el-input type="text" v-model="form.money"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit">立即处理</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </el-container>
</template>

<script>
  import searchbox from '../ZF/searchbox'//引入搜索框组件
  // import mytext from './mytext'//引入搜索框组件
  export default {
    name: "productRefund",
    components: {
      searchbox,
      // mytext

    },
    //表格数据的操作方法
    data() {
      return {
        //分页
        currentPage: 1,
        currentSpuPage: 1,
        pageSize: 10,
        // table数据传入
        list: [],
        chosenList:[],
        //删除弹框状态
        dialogDelVisible: false,
        //编辑弹框状态
        dialogFormVisible: false,
        //查看弹框状态
        dialogTableVisible: false,
        //批量退款
        dialogSelectRefundFormVisible:false,
        // 模态框表格数据
        gridData: [],
        //修改表单的数据
        form: {
          name: '',
          region: '',
          money: '',
          date1: '',
          desc: '',
          logistic:''
        },
        search: {
          method: '订单编号',
          value: null
        }
      }
    },
    methods: {
      // 分页控制开始
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      handleSpuCurrentChange(val) {
        this.currentSpuPage = val
      },
      // 分页控制结束

      // 选中行
      handleSelectionChange(val) {
        console.log('val:', val)
        this.chosenList = [];
        val.forEach((val, index, arr) => {
          this.chosenList.push(val.refund_id)
        })
      },
      //查看
      handleCheck(index, row) {
        this.dialogTableVisible = true;
        console.log(' index:', index);
        console.log(' row:', row);
        this.gridData = [
          {name: "退款ID", date: row.refund_id},
          {name: "订单编号", date: row.order_id},
          {name: "退款理由", date: row.request_reason},
          // {name: "发起时间", date: row.request_time},
          {name: "卖家处理时间", date: row.request_time},
          {name: "卖家处理方式", date: row.handle_method},
          {name: "处理意见", date: row.handle_note},
          {name: "退款金额", date: row.refund_money},
          // {name: "买家发货时间", date: row.send_time},
          {name: "快递物流单号", date: row.express_code},
          // {name: "卖家收货时间", date: row.receive_time},
        ];
      },
      // 编辑
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        console.log(' index:', index);
        console.log(' row:', row);
        this.form.name = row.refund_id;
        this.form.region = row.handle_method;
        this.form.money = row.refund_money;
        this.form.desc = row.handle_note;
        this.form.date1 = row.handle_time;
        this.form.logistic = row.express_code;
        this.refreshData();
        this.refreshData()
      },
      // 批量退款
      handleRefund(){

        this.dialogSelectRefundFormVisible = true;


      },
      //编辑保存按钮
      onSubmit() {
        console.log('点击触发到提交按钮!');
        console.log(this.form);
        this.$axiosx.get('/api/backGetProductRefundedit', {params: this.form})
          .then((resp) => {

          });
        this.dialogFormVisible = false;
        this.dialogSelectRefundFormVisible=false;
        this.refreshData();
        this.refreshData()
      },
      //点击处理刷新页面
      refreshData() {
        this.$axiosx.get('/api/backGetProductRefund')
          .then((response) => {
            this.list = response.data
          })
          .catch((error) => {
            console.log(error.message)
          })
      },
      //状态样式
      toggleButtonChange(param) {
        if (param === '已处理') {
          return {
            string: '已处理',
            color: 'danger',
            StateColor: 'success'
          }
        } else {
          return {
            string: '未处理',
            color: 'success',
            StateColor: 'danger'
          }
        }
      },
      //状态的筛选
      filterTag (value, row) {
        return row.refund_state === value
      },
      //搜索
      dataFilter () {
        switch (this.search.method) {
          case '订单编号':
            this.list.forEach((val, index, arr) => {
              if (val.order_id === parseFloat(this.search.value)) {
                this.list = [val]
              }
            })
            break
          case '处理方式':
            let showData = []
            this.list.forEach((val, index, arr) => {
              if (val.handle_method.indexOf(this.search.value) >= 0) {
                showData.push(val)
              }
            })
            this.list = showData
            break
        }
      },
    },
    created() {
      this.$axiosx.get('/api/backGetProductRefund')
        .then((response) => {
          this.list = response.data;
          console.log(response.data)
        })
        .catch((error) => {
          console.log(error.message)
        })
    }
  }
</script>

<style scoped lang="less">
  .tableHeader {
    width: 100%;
    color: white;
    background-color: #00838f;
    height: 40px;
    /*margin-bottom: 5px;*/
    font-weight: 700;
    font-size: 14px;
  }

  .tableHeader span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
  }

  .tableSearch {
    /*width: 100%;*/
    height: 60px;
    background-color: #fff;
    margin-bottom: 1px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .tableBottom {
    height: 30px;
    background-color: #fff;
    padding: 10px 20px;
  }
  .input-with-select.el-input.el-input-group.el-input-group--append.el-input-group--prepend {
    width: 500px;
    margin-top: 5px;
  }
  .refundHeader{
    margin-bottom: 20px;
  }
  .el-select{
    width: 110px;
  }
</style>
